<template>
  <div class="peopleManage">
    <div class="message-list left">
      <div class="tab-container">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="工地人员管理"
                       name="userMange">
            <UserStatics :projectId="choosedProject"
                         v-if="activeTab === 'userMange'"></UserStatics>
          </el-tab-pane>
          <el-tab-pane label="材料物资管理"
                       name="materialMange">
            <MaterialStatics :projectId="choosedProject"
                             v-if="activeTab === 'materialMange'"></MaterialStatics>
          </el-tab-pane>
          <el-tab-pane label="机械设备管理"
                       name="equipmentMange">
            <EquipmentStatics :projectId="choosedProject"
                              v-if="activeTab === 'equipmentMange'"></EquipmentStatics>
          </el-tab-pane>
        </el-tabs>
        <el-select filterable
                   v-model="choosedProject">
          <!-- <el-option value=""
                       label="全部"></el-option> -->
          <el-option v-for="item in projectList.list"
                     :key="item.project_id"
                     :label="item.project_name"
                     :value="item.project_id"></el-option>
        </el-select>
      </div>
    </div>
  </div>
</template>

<script>
import UserStatics from "./UserStatics";
import MaterialStatics from "./MaterialStatics";
import EquipmentStatics from "./EquipmentStatics";
import { ProjectListApi } from "@/services/ProjectCenter";
import { standardCodeApi } from "@/services/StandardCode";
export default {
  data () {
    return {
      requestParam: {
        search: "",
        created_start: "",
        created_end: "",
        province_no: "",
        city_no: "",
        area_no: "",
        major_type: "",
        status: "",
        is_page: 0,
        // per_page: 4,
        dateRange: ""
      },
      // 项目数据
      projectList: {
        list: [],
        total_count: 0
      },
      choosedProject: '',
      activeTab: "userMange",
      // 建筑类型标准码
      buildingTypeCode: [],
      // 建筑类型标准码map
      buildingTypeMap: new Map(),
    }
  },
  props: {
    projectId: {
      type: String,
    }
  },
  components: {
    UserStatics,
    MaterialStatics,
    EquipmentStatics,
  },
  created () { },
  mounted () {
    this.getProjectList();
  },
  methods: {

    // 获取建筑类型标准码
    getBuildingTypeCode () {
      return standardCodeApi
        .getStandardCodeData({
          data: {
            code_type: "buildingType"
          }
        })
        .then(res => {
          if (res.code === 0) {
            this.buildingTypeCode = res.data.list;
            window.localStorage.setItem(
              "buildingTypeCode",
              JSON.stringify(res.data.list)
            );
            this.buildingTypeCode.map(item => {
              this.buildingTypeMap.set(item.value, item);
            });
          }
        });
    },
    // 获取项目数据
    getProjectList () {
      ProjectListApi.getProjectList({
        params: this.requestParam
      }).then(res => {
        if (res.code === 0) {
          this.choosedProject = "";
          let list = [];
          res.data.list.map(item => {
            let buildingType = this.buildingTypeMap.get(item.building_type) || {};
            item.buildingTypeName = buildingType.name;
          });
          this.projectList = JSON.parse(JSON.stringify(res.data));
          this.projectList.list.map(item => {
            list.push(item.project_id);
          });
          this.choosedProject = list.join(",");
          this.projectList.list.unshift({
            project_id: this.choosedProject,
            project_name: "全部"
          });
          // this.projectList.list.map((item) => {
          //   let buildingType = this.buildingTypeMap.get(item.building_type)
          //   item.buildingTypeName = buildingType.name
          // })
          // this.showTopProjectList = res.data.list.slice(0, 4);


        }
      });
    },
  },
  computed: {},
  watch: {}
}
</script>

<style lang="scss" scoped>
.peopleManage {
  background-color: #fff;
  width: 100%;
  height: 100%;
  .message-list {
    padding: 20px;
    background-color: #fff;
    .tab-container {
      position: relative;
      .el-select {
        position: absolute;
        right: 0;
        top: 0;
      }
    }
  }
}
</style>
